﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>ImageView</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style>
        #lunbobox {
            width: 500px;
            height: 300px;
            position: relative;
        }

        .lunbo {
            width: 500px;
            height: 300px;
        }

        .lunbo img {
            width: 500px;
            height: 300px;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        #lunbobox ul {
            width: 285px;
            position: absolute;
            bottom: 10px;
            right: 0px;
            z-index: 5;
        }

        #lunbobox ul li {
            cursor: pointer;
            width: 10px;
            height: 4px;
            border: 1px solid #cccccc;
            float: left;
            list-style: none;
            background: #cccccc;
            text-align: center;
            margin: 0px 5px 0px 0px;
        }

        #toleft {
            display: none;
            width: 30px;
            height: 100px;
            font-size: 40px;
            line-height: 100px;
            text-align: center;
            color: #f4f4f4;
            /*background:#cccccc;
	*/
            /*background:url("../images/toleft.jpg")no-repeat center;
	*/
            position: absolute;
            top: 90px;
            left: 12px;
            cursor: pointer;
            z-index: 99;
            opacity: 0.4;
        }

        #toright {
            display: none;
            width: 30px;
            height: 100px;
            font-size: 40px;
            line-height: 100px;
            text-align: center;
            color: #f4f4f4;
            /*background:#cccccc;
	*/
            position: absolute;
            top: 90px;
            right: 0px;
            cursor: pointer;
            z-index: 99;
            opacity: 0.4;
        }
    </style>
</head>

<body>
    <div class="middle_right">
        <div id="lunbobox">
            <div id="toleft">
                &lt;</div>
            <div class="lunbo">
                <a href="#">
                    <img src="http://uttest.oss-cn-shenzhen.aliyuncs.com/bikeCompany_license/45d2a22fd1504b7baf015f9748d030a7.png">
                </a>
                <a href="#">
                    <img src="http://uttest.oss-cn-shenzhen.aliyuncs.com/bikeCompany_license/486a555b33d74a30a43a0ee3f0abf37c.png">
                </a>
                <a href="#">
                    <img src="http://uttest.oss-cn-shenzhen.aliyuncs.com/bikeCompany_license/0384e2d9d707428580ec716160a825b8.png">
                </a>
                <a href="#">
                    <img src="http://uttest.oss-cn-shenzhen.aliyuncs.com/bikeCompany_license/0d46aa87350f419381be23c345f0f8c0.png">
                </a>
                <a href="#">
                    <img src="http://uttest.oss-cn-shenzhen.aliyuncs.com/bikeCompany_license/5b6367bba8a6429a813092f2708da43d.png">
                </a>
            </div>
            <div id="toright">&gt;</div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <span></span>
        </div>
    </div>

    <script>
        // 轮播
        $(function () {
            //$("#toright").hide();
            //$("#toleft").hide();
            $('#toright').hover(function () {
                $("#toleft").hide()
            }, function () {
                $("#toleft").show()
            })
            $('#toleft').hover(function () {
                $("#toright").hide()
            }, function () {
                $("#toright").show()
            })
        })

        var t;
        var index = 0;
        // 自动播放
        // t = setInterval(play, 3000)

        function play() {
            index++;
            if (index > 4) {
                index = 0
            }
            // console.log(index)
            $("#lunbobox ul li").eq(index).css({
                "background": "#999",
                "border": "1px solid #ffffff"
            }).siblings().css({
                "background": "#cccccc",
                "border": ""
            })

            $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000);
        };

        ///点击鼠标 图片切换
        $("#lunbobox ul li").click(function () {

            //添加 移除样式
            //$(this).addClass("lito").siblings().removeClass("lito"); //给当前鼠标移动到的li增加样式 且其余兄弟元素移除样式   可以在样式中 用hover 来对li 实现
            $(this).css({
                "background": "#999",
                "border": "1px solid #ffffff"
            }).siblings().css({
                "background": "#cccccc"
            })
            var index = $(this).index(); //获取索引 图片索引与按钮的索引是一一对应的
            // console.log(index);

            $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings  找到 兄弟节点(不包括自己）
        });

        /////////////上一张、下一张切换
        $("#toleft").click(function () {
            index--;
            if (index <= 0) //判断index<0的情况为：开始点击#toright  index=0时  再点击 #toleft 为负数了 会出错
            {
                index = 4
            }
            console.log(index);
            $("#lunbobox ul li").eq(index).css({
                "background": "#999",
                "border": "1px solid #ffffff"
            }).siblings().css({
                "background": "#cccccc"
            })

            $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings  找到 兄弟节点(不包括自己）必须要写
        }); // $("#imgbox a ")获取到的是一个数组集合 。所以可以用index来控制切换

        $("#toright").click(function () {
            index++;
            if (index > 4) {
                index = 0
            }
            console.log(index);
            $(this).css({
                "opacity": "0.5"
            })
            $("#lunbobox ul li").eq(index).css({
                "background": "#999",
                "border": "1px solid #ffffff"
            }).siblings().css({
                "background": "#cccccc"
            })
            $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings  找到 兄弟节点(不包括自己）
        });
        $("#toleft,#toright").hover(function () {
            $(this).css({
                "color": "black"
            })
        },
            function () {
                $(this).css({
                    "opacity": "0.3",
                    "color": ""
                })
            })
        ///

        ///////鼠标移进  移出
        $("#lunbobox ul li,.lunbo a img,#toright,#toleft ").hover(
            ////////鼠标移进
            function () {
                $('#toright,#toleft').show()
                clearInterval(t);

            },
            ///////鼠标移开
            function () {
                //$('#toright,#toleft').hide()
                //alert('aaa')
                t = setInterval(play, 3000)

                function play() {
                    index++;
                    if (index > 4) {
                        index = 0
                    }
                    $("#lunbobox ul li").eq(index).css({
                        "background": "#999",
                        "border": "1px solid #ffffff"
                    }).siblings().css({
                        "background": "#cccccc"
                    })
                    $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000);
                }
            })
    </script>

</body>

</html>